<template>
    <div>
        <el-divider></el-divider>
        <div class="edits">
            <div>
                水库详情
            </div>
            <div>
                <el-button class="back" icon="el-icon-arrow-left" type="primary" @click="go">返回</el-button>
            </div>
        </div>
        <el-divider></el-divider>
        <el-form ref="reservoir" :model="reservoir" label-width="110px">
        <el-form-item label="水库图片  :" style="display: flex; align-items: center;    ">
          <img :src="reservoir.img" style="width: 100px; height: 100px; margin-left: -50%; vertical-align: middle;" alt="">
        </el-form-item>
        <el-form-item label="水库名称  :">
            <el-input v-model="reservoir.name"  disabled style="width: 240px;"></el-input>
        </el-form-item>
        <el-form-item label="水库编号  :">
          <el-input v-model="reservoir.reservoirNo" disabled style="width: 240px;"></el-input>
        </el-form-item>
        <el-form-item label="智能渔方总数  :">
          <el-input v-model="reservoir.fishPartyTotalNum" disabled style="width: 240px;"></el-input>
        </el-form-item>
        <el-form-item label="待租数  :">
          <el-input v-model="reservoir.fishPartyStockNum" disabled style="width: 240px;"></el-input>
        </el-form-item>
        <el-form-item label="水库地址  :">
          <el-input v-model="reservoir.addressDetail" disabled style="width: 240px;"></el-input>
        </el-form-item>
      </el-form>
      
        <div class="fish">
            <div class="fish-box">
                <div>
                    <img style="height: 25px; width: 20px;" src="../../../assets/images/fishInfo.png" alt="" />
                </div>
                <div class="fish-info">
                    鱼苗信息
                </div>
            </div>
            <div class="kind">鱼苗种类</div>
            <div style="display:flex; margin-left: 175px;">
                <div v-for="item in fryList" :key="item.fryId">
                    <div class="boder">
                        <div style=" padding:  0 20px;">
                            鱼苗:{{ item.fryName }} {{ item.initWeight }}kg


                        </div>
                    </div>
                </div>
            </div>
            <div class="kind" style="margin-top: 50px;">随机鱼苗比例</div>

            <div style="display:flex; margin:10px 175px;">
                <div v-for="item in fryList" :key="item.fryId">
                    <div class="boder">
                        <div style=" padding:  0 20px;">
                            鱼苗:{{ item.fryName }} {{ item.scale }} %
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据列表 -->
        <div class="lists"
            style="  display: flex; align-items: center;padding-left: 20px;height: 50px;background-color: #f3f3f3;color: #666;">
            <div>
                <img class="list-imgs" style="  width: 20px; height: 20px;" src="../../../assets/images/查询数据列表.png"
                    alt="">
            </div>
            <div>
                数据列表
            </div>
        </div>
        <div>
            <!-- 表格 -->
            <el-table border :data="listData" style="width: 100%" align="center">
                <el-table-column prop="fishPartyNo" label="智能渔方编号" align="center"></el-table-column>

                <el-table-column prop="userId" label="用户ID" align="center"></el-table-column>

                <el-table-column prop="cityName" label="智能渔方名称" align="center"></el-table-column>
                <el-table-column prop="effectiveDate" label="租赁起租日期" align="center"></el-table-column>
                <el-table-column prop="expirationDate" label="租赁截至日期" align="center"></el-table-column>
                <el-table-column prop="homeLiveFlag" label="渔方属性" align="center"></el-table-column>
                <el-table-column  label="租赁属性" align="center">

                    <template slot-scope="scope">
                        <div v-if="(scope.row.attribute==1)">
                            租赁3年获得40000元人民币 
                        </div>
                        <div v-if="(scope.row.attribute==2)">
                            租赁3年鱼获自行处理
                        </div>
                        <div v-if="(scope.row.attribute==3)">
                            租赁3年获得2400斤鱼
                        </div>
                    </template>
                </el-table-column>


                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block" style="margin-top:15px; ">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" background
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { detail, editFishParty } from '@/api/user'
export default {
    data() {
        return {
            reservoirId: '', //水库ID
            reservoir: {}, //水库信息
            fryList: [], //鱼苗信息
            currentPage: 1, //当前页数
            pageSize: 10, //每页条数
            total: 0, //总条目数
            listData: [],

        }
    },
    created() {
        this.reservoirId = this.$route.query.id
        this.detail()
        this.editFishParty(this.pageSize, this.currentPage)
    },

    methods: {
        async detail() {
            let data = {
                reservoirId: this.reservoirId
            }
            let result = await detail(data)
            if (result.code == 0) {
                this.reservoir = result.data.reservoir
                this.fryList = result.data.fryList
            }
        },
        async editFishParty(limit, page) {
            let data = {
                limit: this.pageSize,
                page: this.currentPage,
                reservoirId: this.reservoirId
            }
            let result = await editFishParty(data)
            if (result.code == 0) {
                this.listData = result.data.records
                this.pageSize = result.data.limit
                this.total = result.data.total
                result.data.records.forEach(element => {
                    element.homeLiveFlag = 0 ? '私域' : '公域'
                })
            }



        },
        // 返回
        go() {
            this.$router.go(-1)
        },
        // 查看详情
        handleClick(e) {
            // 渔方ID
            let fishPartyId = e.fishPartyId
            let orderId = e.orderId

            this.$router.push({ path: '/fishEdits', query: { fishPartyId, orderId } })
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.reservoir(this.pageSize, this.currentPage)
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.reservoir(this.pageSize, this.currentPage)
        },
    }
}
</script>

<style lang="scss" scoped>

::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #F5F7FA;
    border-color: #E4E7ED;
    color: #070707;
    cursor: not-allowed;
}
.edits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

.boder {
    border: 1px solid #ccc;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: flex;
}

.kind {
    margin-left: 80px;
}

.fish-info {
    margin-left: 5px;
    height: 25px;
}

.fish-box {
    display: flex;
    align-items: center;
    margin: 36px 20px;
}

.fish {
    border: 1px solid #ccc;
    width: 100%;
    height: 350px;
    margin-top: 30px;
}

.edit {
    border: 1px solid #ccc;
    width: 180px;
}

.edit-name {
    border: 1px solid #ccc;
    width: 180px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

.portait-table[data-v-d17131dc] {
    border-collapse: collapse;
    border: none;
    width: 100%;
    height: 236px;
}

.portait-table {
    border-collapse: collapse;
    border: none;
    width: 100%;

    td {
        border: 1px solid #F3F3F3;
        height: 40px;
        padding-left: 10px;
        color: #333;

        &:nth-child(odd) {
            background: #EAEAEA;
            color: #454545;
        }
    }

    .lists {
        display: flex;
        align-items: center;
        padding-left: 20px;
        height: 50px;
        background-color: #f3f3f3;
        color: #666;

        .list-imgs {
            width: 20px;
            height: 20px;
        }

    }


    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #1abc9c !important;
        color: #FFF;
    }

    .search {
        // display: flex;
        align-items: center;
        // height: 80px;
        line-height: 80px;
        margin: 0 20px;

    }

    .whead {
        width: 400px;
        display: -webkit-box;
    }

}
</style>